const AntDesignThemePlugin = require("antd-theme-webpack-plugin");
const path = require("path");

const options = {
  antDir: path.join(__dirname, "./node_modules/ant-design-vue"), //antd包位置
  stylesDir: path.join(__dirname, "./src/styles/theme"), //主题文件所在文件夹
  varFile: path.join(__dirname, "./src/styles/theme/variables.less"), // 自定义默认的主题色
  mainLessFile: path.join(__dirname, "./src/styles/theme/index.less"), // 项目中其他自定义的样式（如果不需要动态修改其他样式，该文件可以为空）
  outputFilePath: path.join(__dirname, "./public/color.less"), //提取的less文件输出到什么地方
  themeVariables: ["@primary-color",'@table-header-sort-active-bg'], //要改变的主题变量
  indexFileName: "./public/index.html", // index.html所在位置
  generateOnce: false // 是否只生成一次（if you don't want to generate color.less on each change in code to make build process fast in development mode, assign it true value. But if you have new changes in your styles, you need to re-run your build process npm start.）
};

const Version = new Date().getTime()

const vueConfig = {

  chainWebpack: (config) => {

    const svgRule = config.module.rule('svg');
    svgRule.uses.clear();
    svgRule
        .oneOf('inline')
        .resourceQuery(/inline/)
        .use('vue-svg-icon-loader')
        .loader('vue-svg-icon-loader')
        .end()
        .end()
        .oneOf('external')
        .use('file-loader')
        .loader('file-loader')
        .options({
          name: 'assets/[name].[hash:8].[ext]'
        })

    config.module
        .rule('md')
        .test(/\.md/)
        .use('html-loader')
        .loader('html-loader')
        .end()
        .use('markdown-loader')
        .loader('markdown-loader')
        .end()
      config.resolve.alias.set('@$', path.join(__dirname,'src'))
        if (process.env.NODE_ENV ==='development'){
            config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
        }

  },
  css: {
    loaderOptions: {
      less: {
        data: `@import "./src/styles/theme/variables.less"`,
        modifyVars: {
          // 'nice': '#F2526D',
          // 'primary-color': '#1DA57A',
          // 'link-color': '#1DA57A',
          // 'border-radius-base': '2px',
        },
        // extract: {
        //   // 修改打包后css文件名   // css打包文件，添加时间戳
        //   filename: `static/css/[name].${Version}.css`,   // 此处static/css/xxx 目录根据自己打包情况来定,我使用的就没有static一层,所以直接去掉static即可。根据自己项目决定
        //   chunkFilename: `static/css/[name].${Version}.css`
        // },
        javascriptEnabled: true
      }
    }
  },
  configureWebpack: {
    performance: {
      hints: false
    },
    optimization: {
      splitChunks: {
        minSize: 10000,
        maxSize: 250000,
      }
    },
    plugins: [new AntDesignThemePlugin(options)],
    output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
      // filename: utils.assetsPath('js/[name].[chunkhash].'+Version+'js'),
      // chunkFilename: utils.assetsPath('js/[id].[chunkhash].'+Version+'js')
      filename: `static/js/[name].${Version}.js`,         // js打包文件，添加时间戳
      chunkFilename: `static/js/[name].${Version}.js`
    }
  },
  runtimeCompiler: true,
  devServer: {
    // 配置相应头
    headers: {
      'Cache-Control': 'no-cache, no-store, must-revalidate',
      'Pragma': 'no-cache',
      'Expires': 0,
    },
    proxy: {
      '/api' : {
        target: "http://192.168.0.87:8087/",
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api':''
        }
      }
    }
  },
};


module.exports = vueConfig
